<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="['正常', '挂失']" ref="cardState">
                        <p>卡片状态</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt :txt="'姓名/手机号/卡号'" ref="txt">
                        <p>输入</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <GreenBtn @click.native="query">查询</GreenBtn>
                <BlueBtn @click.native="add">新增</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="filterCard.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column type="index" label="序号" width="120">
                </el-table-column>
                <el-table-column label="房屋" width="300">
                    <template slot-scope="scope">
                        {{ scope.row.BuildingName + ' ' + scope.row.UnitName + ' ' + scope.row.FloorNumber + '
                        '+scope.row.RoomNumber}}
                    </template>
                </el-table-column>
                <el-table-column prop="ICNum" label="IC卡号" width="280">
                </el-table-column>
                <el-table-column prop="Owner" label="姓名" width="210">
                </el-table-column>
                <el-table-column prop="Phone" label="手机号" width="220">
                </el-table-column>
                <el-table-column prop="CardState" label="卡片状态" width="220">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editRow(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">退卡</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterCard.length / 10) }}</span>页/<span>{{ filterCard.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterCard.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <!-- 点击编辑 -->
        <el-dialog title="编辑" :visible.sync="editDialog" width="25%" :before-close="editClose" class="editDialog">
            <el-form ref="editForm" :model="editForm" label-width="80px" :rules="rules">
                <el-form-item label="IC卡号" prop="ICNum">
                    <el-input v-model="editForm.ICNum"></el-input>
                </el-form-item>
                <el-form-item label="卡片状态" prop="CardState">
                    <el-select v-model="editForm.CardState" placeholder="请选择卡片状态">
                        <el-option value="正常"></el-option>
                        <el-option value="挂失"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人员" prop="Owner">
                    <el-select v-model="editForm.Owner" filterable placeholder="请选择或输入搜索">
                        <el-option v-for="(item, index) in options" :key="index" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editClose">取 消</el-button>
                <el-button type="primary" @click="editConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击新增 -->
        <el-dialog title="新增" :visible.sync="addDialog" width="25%" :before-close="addClose" class="editDialog">
            <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">
                <el-form-item label="IC卡号" prop="ICNum">
                    <el-input v-model="addForm.ICNum"></el-input>
                </el-form-item>
                <el-form-item label="卡片状态" prop="CardState">
                    <el-select v-model="addForm.CardState" placeholder="请选择卡片状态">
                        <el-option value="正常"></el-option>
                        <el-option value="挂失"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人员" prop="Owner">
                    <el-select v-model="addForm.Owner" filterable placeholder="请选择或输入搜索">
                        <el-option v-for="(item, index) in options" :key="index" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addClose">取 消</el-button>
                <el-button type="primary" @click="addConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        GreenBtn,
        SelectIpt,
        TextIpt
    },
    methods: {
        //点击查询
        query() {
            this.pages = 0
            this.page = 0
            const serach = {}
            if (this.$refs.cardState.value) {
                serach.cardState = this.$refs.cardState.value
            }
            if (this.$refs.txt.input) {
                serach.txt = this.$refs.txt.input
            }
             this.filterCard = this.allCard.filter(item => {
                if (serach.cardState && item.CardState !== serach.cardState) {
                    return false;
                }
                // 处理 txt 匹配多个字段
                if (serach.txt) {
                    // 将所有相关字段拼接成一个字符串并进行匹配
                    const itemText = [
                        item.Owner,       // 姓名
                        item.Phone,     // 手机号
                        item.ICNum        // IC卡号
                    ].join(' ').toLowerCase();  // 将字段拼接后统一转换为小写字母

                    // 判断是否包含 searchText
                    if (!itemText.includes(serach.txt)) {
                        return false;
                    }
                }
                return true
            })
            
        },
        //新增卡片
        insertCard() {
            this.$axios.post('http://127.0.0.1/access/insertCard', {
                ...this.addForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }
            ).then(res => {
                if (res.status) {
                    this.getAll()
                    this.$message({
                        message: '修改信息成功',
                        type: 'success'
                    });
                    this.addDialog = false
                }
            }).catch(err => {
                console.log(err);
            })
        },
        addConfirm() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.insertCard()
                } else {
                    return false;
                }
            });
        },
        addClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.addDialog = false
                })
                .catch(_ => { });
        },
        //点击新增
        add() {
            this.options = []
            this.addDialog = true
            this.allCard.forEach(item => {
                this.options.push(item.Owner)
            });
        },
        //点击表格里的编辑
        editRow(index, row) {
            this.options = []
            this.allCard.forEach(item => {
                this.options.push(item.Owner)
            });
            this.editForm.ICNum = row.ICNum
            this.editForm.CardState = row.CardState
            this.editForm.Owner = row.Owner
            this.editForm.ID = row.ID
            this.clickIndex = index + this.pages
            this.editDialog = true
        },
        //点击编辑里的确定
        editConfirm() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    let flag = false
                    if (this.filterCard[this.clickIndex].ICNum != this.editForm.ICNum) {
                        this.filterCard[this.clickIndex].ICNum = this.editForm.ICNum
                        flag = true
                    }
                    if (this.filterCard[this.clickIndex].CardState != this.editForm.CardState) {
                        this.filterCard[this.clickIndex].CardState = this.editForm.CardState
                        flag = true
                    }
                    if (this.filterCard[this.clickIndex].Owner != this.editForm.Owner) {
                        this.filterCard[this.clickIndex].Owner = this.editForm.Owner
                        flag = true
                    }
                    if (flag) {
                        //如果flag值发生改变请求接口
                        this.editState()
                    } else {
                        this.editDialog = false
                    }
                } else {
                    return false;
                }
            });
        },
        editClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.editDialog = false
                })
                .catch(_ => { });
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
        //修改卡片状态
        editState() {
            this.$axios.post('http://127.0.0.1/access/updateCardState', {
                ...this.editForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }
            ).then(res => {
                this.$message({
                    message: '修改信息成功',
                    type: 'success'
                });
                this.editDialog = false
            }).catch(err => {
                console.log(err);
            })
        },
        //请求所有的数据
        getAll() {
            this.$axios.get('http://127.0.0.1/access/permissions', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.allCard = res.data
                this.filterCard = res.data
            }).catch(err => {
                console.log(err);
            })
        }
    },
    data() {
        return {
            addDialog: false,
            addForm: {
                ICNum: '',
                CardState: '',
                Owner: '',
            },
            options: [],
            rules: {
                ICNum: [
                    { required: true, message: '请输入IC卡号', trigger: 'change' }
                ],
                CardState: [
                    { required: true, message: '请选择卡片状态', trigger: 'change' }
                ],
                Owner: [
                    { required: true, message: '请选择人员', trigger: 'change' }
                ]
            },
            //点击编辑的索引
            clickIndex: 0,
            editForm: {
                ICNum: '',
                CardState: '',
                Owner: '',
                ID: ''
            },
            //编辑对话框
            editDialog: false,
            page: 0,
            pages: 0,
            //接口返回的数据
            allCard: [],
            filterCard: []
        }
    },
    mounted() {
        this.getAll()
    }
}
</script>

<style scoped>
.editDialog>>>input {
    width: 217px;
}

.editDialog>>>.el-dialog__body {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.table>>>.el-table {
    min-height: 580px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top li {
    margin-bottom: 20px;
}
</style>